<!--
 选择项目组件
 传入参数：
    sendObj：{
      projectId：//绑定到model的值

    }，
    otherConfig：{
      smallLable: Boolean //是否显示小的选择项目几个字
      hideLabel : Boolean  // 是否显示“选择项目”这几个字
      colWidth : Number (default:4) //输入框的宽度
      hasEmpty ：Boolean （default:false）//是否显示 "全部" 选项
      disabled:Boolean （default：false） 是否禁用选项
      size:string (default:'medium') input框size,
      noClear: Boolean (defualt:false) //是否可以清除选项
    }
 事件：
    cancelOperate：改变选择触发事件 返回：this.sendObj.projectId,this.sendObj
    initCallback：初始化之后触发事件 返回：this.itemList
 -->
<template>
    <div>
    	<div v-if="!otherConfig.hideLabel && !otherConfig.smallLable" class="label_desc fl">选择项目：</div>
      <span v-if="!otherConfig.hideLabel && otherConfig.smallLable" class="label_desc" style="float:left;margin-right: 10px;color: #5b5b5b;width: 60px;display: inline-block;font-size:14px;">选择项目:</span>
      <el-col :span="otherConfig.colWidth||4">
    		<el-select
			    v-model="sendObj.projectId"
			    filterable
			    :clearable="!otherConfig.noClear"
			    remote
			    reserve-keyword
			    placeholder="请输入项目名称"
			   	@change="cancelOperate"
			   	@clear="cancelOperate"
			   	:disabled="otherConfig.disabled"
			    :loading="loading"
			    class="wd100"
			    :size="otherConfig.size||'medium '"
			    >
          <el-option v-if="otherConfig.hasEmpty" label="全部" value=""></el-option>
			    <el-option
			      v-for="item in itemList"
			      :key="item.value"
			      :label="item.name"
			      :value="item.id">
			    </el-option>
			</el-select>
    	</el-col>
    </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [],
      label: '',
      loading: false
    }
  },
  props:{
  	sendObj: {
        type: Object
    },
    otherConfig:{
        type: Object,
        default:Object
    }
  },
  created() {
    this.remoteMethod()
  },
  mounted(){
    this.$Bus.$on('addNewProject',()=>{
      this.remoteMethod()
    })
  },
  methods: {
    cancelOperate(item) {
    	if(this.sendObj.projectId){
    		this.getProjectName(this.sendObj.projectId)
      		this.$emit('cancelOperate', this.sendObj.projectId,this.sendObj)
    	}else{
    		this.$emit('cancelOperate', '',this.sendObj)
    	}
    },
    getProjectName(vId){ 
		let obj = this.itemList.find((item)=>{//这里的userRoleList就是上面遍历的数据源 
			return item.id == vId;//筛选出匹配数据
		}); 
		this.sendObj.name = obj.name;
	},
    remoteMethod(query) {
     	this.$httpProj.post('proj/project/projAndPicPage',{}).then(data => {
            this.itemList = data.data.list
            this.$emit('initCallback', this.itemList)
        })
    }
  }
}
</script>
